<template>
    <div class="room-type-v9">
      <img :src="item.image?.url" alt="">
      <div class="content">
        <div class="summaryText">
            {{ item.summaryText }}
        </div>
        <div class="houseName">
            {{ item.houseName }}
        </div>
        <div class="rateAndPrice">
            <van-rate v-model="score" readonly allow-half color="#fff" />
            <div class="price">
               ￥ {{ item.finalPrice }}
            </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
      import {defineProps,computed} from "vue"
      const prpos = defineProps({
          item:{
              type:Object,
              default:{}
          }
      })
      const score = computed(() => parseFloat(prpos.item.commentScore))
  </script>
  
  <style lang="less" scoped>
      .room-type-v9 {
        position: relative;
        left: 0;
        right: 0;
        top: 0;
        width: 45vw;
        padding: 5px;
          
        img {
            width: 100%;
        }

        .content {
            position: absolute;
            left: 15px;
            bottom: 15px;
            color: #fff;
            font-size: 12px;

            .houseName {
                margin: 5px 0;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }
            
            .rateAndPrice {
                display: flex;
                justify-content: space-around;
                text-align: center;
                .price {
                    font-size: 17px;
                }
            }
        }
      }
  </style>